<template>
    <div id="section">
        <div id="center">
            <div id="nul"></div>
            <div id="cat">
                <div class="userimg">
                    <span class="yuan">
                        <van-uploader :after-read="afterRead" id="van"/>
                    </span>
                </div>
                <div class="username">
                    <div class="name">
                        <p><b>我是会员</b></p>
                        <span>这个人很懒</span>
                    </div>
                    <div class="right">></div>
                </div>
            </div>
            <div class="list">
                <div>
                    <img src="../../../../public/ycbimg/catimg1 (1).png" alt="">
                    <p>我的订单</p>
                </div>
                <div>
                    <img src="../../../../public/ycbimg/catimg1 (2).png" alt="">
                    <p>我的拼图</p>
                </div>
                <div>
                    <img src="../../../../public/ycbimg/catimg1 (3).png" alt="">
                    <p>优惠券</p>
                </div>
                <div>
                    <img src="../../../../public/ycbimg/catimg1 (4).png" alt="">
                    <p>选课单</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

</script>
<style scoped>
#section{
    width: 100%;
    height: 1.6rem;
    margin-top: .5rem;
    background-color: #f9fbfa;
}
#center{
    width: 3.45rem;
    height: 100%;
    margin: auto;
}
#nul{
    width: 100%;
    height: .1rem;
    background-color: white;
}
#cat{
    width: 100%;
    height: .56rem;
    background-color: white;
}
.userimg{
    width: .88rem;
    height: 100%;
    float: left;
}
.yuan{
    width: .50rem;
    height: .50rem;
    display: block;
    border-radius: 50%;
    margin: auto;
    background-color: gray;
}
.username{
    width: 2.57rem;
    height: 100%;
    float: left;
}
.name{
    width: 2.3rem;
    height: 100%;
    float: left;
}
.name p{
    width: 100%;
    height: .34rem;
    line-height: .34rem;
    font-size: .12rem;
}
.name span{
    font-size: 12px;
    color: gray;
}
.right{
    width: 0.25rem;
    float: right;
    line-height: .56rem;
    font-size: .16rem;
}
.list{
    width: 100%;
    height: .78rem;
    background-color: white;
}
.list div{
    width: 25%;
    height: 100%;
    float: left;
    text-align: center;
    padding-top: .05rem
}
.list div img{
    width: .24rem;
    height: .24rem;
    margin: auto;
}
.list div p{
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: .1rem;
    line-height: .39rem;
}
 ::v-deep .van-uploader__upload{
     width: .50rem;
    height: .50rem;
    display: block;
    border-radius: 50%;
    margin: auto;
    background-color: gray;
}
 ::v-deep .van-icon{
    text-align: center;
    display: block;
    line-height: .5rem;
}
</style>
